<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch, onMounted, ref } from 'vue'
import { TableData } from '@/api/role/types'
import { required } from '@/utils/formRules'

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})
const data = ref<any>({})
const rules = reactive({
  org_name: [required]
})

const { register, methods, elFormRef } = useForm({
  schema: props.formSchema
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
    data.value = currentRow
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})

// 初始化年份、月份、日期的数据
const years = ref<any[]>([])
const months = ref<any[]>([])
const days = ref<any[]>([])

// // 选中的年份、月份、日期
// const year: any = ref<number | string>('')
// const month: any = ref<number | string>('')
// const day: any = ref<number | string>('')

// 根据选中的年份和月份生成对应的日期
const generateDays = () => {
  const years = Number(data.value.year) ? Number(data.value.year) : 0
  const months = Number(data.value.month) ? Number(data.value.month) : 0
  const daysInMonth = new Date(years, months, 0).getDate()
  days.value = Array.from({ length: daysInMonth }, (_, index) => index + 1)
  days.value.unshift('*')
}

// 监听年份变化
const onYearChange = () => {
  generateDays()
}

// 监听月份变化
const onMonthChange = () => {
  generateDays()
}
// 初始化年份和月份的选项
const initOptions = () => {
  const currentYear = new Date().getFullYear()
  // const currentMonth = new Date().getMonth() + 1
  years.value = Array.from({ length: 10 }, (_, index) => currentYear - index)
  months.value = Array.from({ length: 12 }, (_, index) => index + 1)

  years.value.unshift('*')
  months.value.unshift('*')

  // year.value = currentYear.toString()
  // month.value = currentMonth.toString()
  generateDays()
}
onMounted(initOptions)

// const hour: any = ref('')
// const minute = ref('')
const hourOptions: any = ref([])
const minuteOptions: any = ref([])

// 生成小时选项
for (let i = 0; i < 24; i++) {
  hourOptions.value.push(i.toString().padStart(2, ''))
}
hourOptions.value.unshift('*')

// const hours = hour.value == '*' ? '*' : parseInt(hour.value)
// console.log(hours, 'hours', hour.value)
minuteOptions.value = []
for (let i = 0; i < 60; i++) {
  minuteOptions.value.push(i.toString().padStart(2, ''))
}
if (data.value.hour === 0) {
  minuteOptions.value.splice(0, 1) // 如果选中的小时为0，删除分钟选项的第一个选项（00）
}
minuteOptions.value.unshift('*')

// 监听选中的小时变化，更新分钟选项
// watch(hour, updateMinuteOptions)

// const week = ref('')
const weekOptions: any = ref([])

// 生成周选项
// for (let i = 1; i <= 52; i++) {
//   weekOptions.value.push(`第${i}周`)
// }
for (let i = 1; i <= 7; i++) {
  weekOptions.value.push(`周${i}`)
}
weekOptions.value.unshift('*')
</script>

<template>
  <Form :rules="rules" @register="register" :data="data">
    <template #year>
      <el-select v-model="data.year" placeholder="请选择年份" @change="onYearChange">
        <el-option v-for="index in years" :key="index" :label="index" :value="index" />
      </el-select>
    </template>
    <template #month>
      <el-select v-model="data.month" placeholder="请选择月份" @change="onMonthChange">
        <el-option v-for="index in months" :key="index" :label="index" :value="index" />
      </el-select>
    </template>
    <template #day>
      <el-select v-model="data.day" placeholder="请选择日期">
        <el-option v-for="index in days" :key="index" :label="index" :value="index" />
      </el-select>
    </template>
    <template #hour>
      <el-select v-model="data.hour" placeholder="选择小时">
        <el-option v-for="index in hourOptions" :key="index" :label="index" :value="index" />
      </el-select>
    </template>
    <template #minute>
      <el-select v-model="data.minute" placeholder="选择分钟">
        <el-option v-for="index in minuteOptions" :key="index" :label="index" :value="index" />
      </el-select>
    </template>
    <template #week>
      <el-select v-model="data.week" placeholder="选择周">
        <el-option v-for="index in weekOptions" :key="index" :label="index" :value="index" />
      </el-select>
    </template>
  </Form>
</template>
